<!-- CustomNavBar.vue -->
<template>
	<view class="rectangle-small">
		   <view class="back-arrow" @click="goBack">
		      <text>＜</text> <!-- 使用文本字符表示箭头，或者使用图标 -->
		    </view>
	  <view class="my-buttons-container">
		  <view class="tabs-container">
			  <view class="tab" @click="handleTabClick('全部')"  :class="{ 'tab-active': selectedTab === '全部' }">
				<text class="tab-text" @click="switchComponent('全部')">全部</text>
			  </view>
			  <view class="tab" @click="handleTabClick('预约')" :class="{ 'tab-active': selectedTab === '预约' }">
				<text class="tab-text" @click="switchComponent('预约')">预约</text>
			  </view>
			  <view class="tab" @click="handleTabClick('提货')" :class="{ 'tab-active': selectedTab === '提货' }">
				<text class="tab-text" @click="switchComponent('提货')">提货</text>
			  </view>
			  <view class="tab" @click="handleTabClick('签收')" :class="{ 'tab-active': selectedTab === '签收' }">
				<text class="tab-text" @click="switchComponent('签收')">签收</text>
			  </view>
			</view>
		</view>
		<view v-if="selectedTab ==='全部'">
			<selectAll :phone="phone" :selectedOption="selectedOption"></selectAll>
		</view>
		<view v-if="selectedTab ==='预约'">
			<appointment :phone="phone" :subaccount="subaccount" :userId="userId" ></appointment>
		</view>
		<view v-if="selectedTab ==='提货'">
			<delivery :phone="phone" :selectedOption="selectedOption"></delivery>
		</view>
		<view v-if="selectedTab ==='签收'">
			<reply :phone="phone" :selectedOption="selectedOption"></reply>
		</view>
	</view>
</template>
 
<script>
	import appointment from '@/pages/index/appointment/appointment.vue';
	import selectAll from '@/pages/index/select/select.vue';
	import delivery from '@/pages/index/delivery/delivery.vue';
	import TopTabBar from '@/pages/components/TopTabBar/TopTabBar.vue'; 
	import reply from '@/pages/index/reply/reply.vue'; 
export default {
  name: 'MyButtons',
  	components: {
  	    appointment,
		delivery,
		selectAll,
		TopTabBar,
		reply
  	 },
	 props: {
		 selectedOption: {
		     type: String,
		     required: true
		 },
	         value: {
	             type: Number,
	             required: true
	         },
			 phone: {
				 type: Number,
				 required: true
			 },
			 subaccount:{
				 type: String,
				 required: true
			 },
			 userId:{
			 	type: Number,
			 	required: true
			 }
	     },
	
  data() {
      return {
		  currentComponent: 'appointment', // 初始显示的组件
          selectedTab: "预约" ,// 默认选中的选项卡
		  userParam:{}
      };
    },
	onReady() {
		//默认选中的选项卡
		if(this.value==0){
			this.selectedTab="全部";
		}
		if(this.value==1){
			this.selectedTab="预约";
		}
		if(this.value==2){
			this.selectedTab="提货";
		}
		if(this.value==3){
			this.selectedTab="签收";
		}
	},
  methods: {
	  switchComponent(componentName) {
	        this.currentComponent = componentName;
	      },
	  goBack() {
	       // 处理左按钮点击事件，比如返回上一页
	       const vm = this;
	       	uni.getStorage({
	       	  key: 'userParams_key', // 之前保存数据时使用的键
	       	  success: function (res) {
	       		  console.log('获取到的用户参数：', res.data);
	       		  vm.userParam=res.data;
	       	      // 或者，如果你在一个箭头函数中，this 会自动绑定到外部作用域（比如 Vue 实例）
	       	      // 但由于我们在 success 回调中，这里需要使用一个变量来保存引用
	       	   uni.reLaunch({
	       	       url: '/pages/index/index?userName='+vm.userParam.userName+'&phone='+vm.userParam.phone+'&userId='+vm.userParam.userId+'&subaccount='+vm.userParam.subaccount ,// 请注意，这里的url应为相对路径，且以'/'开头
	       	   });
	       	      // 更新页面的状态
	       	    // 你可以在这里使用获取到的数据，比如更新页面的状态或者执行其他逻辑
	       	  },
	       	  fail: function (err) {
	       	    uni.showToast({
	       	    	        title: '账号下线,请重新登录',
	       	    	        icon: 'error',
	       	    	    });
	       	    // 处理获取数据失败的情况，比如显示一个错误提示
	       	  }
	       	});
	      },
     handleTabClick(tabName) {
		  this.selectedTab = tabName; // 更新选中的选项卡
          // 处理选项卡点击事件
          console.log(`点击了选项卡：${tabName}`);
          // 根据需要执行相关逻辑，比如跳转页面或改变数据
        }
  }
}
</script>
 
<style scoped>
	@import "CustomNavBar.css";
</style>